import React, { useState, useEffect } from 'react';
import { Input, Row, Col, Avatar, Tooltip, message } from 'antd';
import styles from './index.less';

interface ItemListProps {
  value?: string;
  defaultValue?: string;
  type: 'bank' | 'insurance' | 'third';
  options: any[];
  onChange?: (select: string) => void;
  onList?: (item: any) => void;
}

const ItemList: React.FC<ItemListProps> = ({
  options,
  value,
  type,
  defaultValue,
  onChange,
  onList,
}) => {
  const [list, setList] = useState<any[]>([]);
  const [checkId, setCheckId] = useState<any>(defaultValue);

  const handleCheck = (item: any) => {
    if (item.isCurrentDistrict) {
      setCheckId(item.id);
      if (onChange) {
        onChange(item.id);
      }
      if (onList) {
        onList(item);
      }
    } else {
      message.warning('该项目所在地区不支持此金融机构,请选择其它金融机构');
    }
  };

  const star = () => {
    if (value) {
      setCheckId(value);
      if (onList) {
        const sitem = options.filter((item) => item.id == value);
        onList(sitem);
      }
    }
  };

  const filterOption = (e) => {
    if (/^[\u4e00-\u9fa5]/.test(e.target.value) || e.target.value == '') {
      const ls = options.filter(item => item.name.indexOf(e.target.value) > -1)
      setList(ls);
    }
  };

  useEffect(() => {
    star();
  }, []);

  useEffect(() => {
    setList(options || []);
  }, [options]);

  const toolName = (names) => {
    return (
      <div>
        {names.map((item: any, index) => {
          return (
            <div className={styles.contact} key={index}>
              {item.name}/{item.phone}
            </div>
          );
        })}
      </div>
    );
  };

  const thirdName = (u, uM) => {
    return (
      <div>
        <div>{u}</div>
        <div>{uM}</div>
      </div>
    );
  };

  const checkAttribute = (children: any) => {
    if (type == 'bank') {
      if (children.attribute) {
        const names = JSON.parse(children.attribute);
        if (names && names.length > 0) {
          if (names.length > 1) {
            const chil = names[0];
            return (
              <Tooltip title={toolName(names)}>
                <div className={styles.contact}>
                  联系人：{chil.name}/{chil.phone}.<a>更多</a>
                </div>
              </Tooltip>
            );
          }
          const chil = names[0];
          return (
            <div className={styles.contact}>
              联系人:{chil.name}/{chil.phone}
            </div>
          );
        }
        return <div />;
      }
      return <div />;
    } else if (type == 'third') {
      if (children.user && children.userMobile) {
        return (
          <Tooltip title={thirdName(children.user, children.userMobile)}>
            <div className={styles.contact} style={{ marginLeft: '34px' }}>
              <a>查看联系方式</a>
            </div>
          </Tooltip>
        );
      }
      return <div />;
    } else if (type == 'insurance') {
      if (children.user && children.userMobile) {
        return (
          <Tooltip title={thirdName(children.user, children.userMobile)}>
            <div className={styles.contact} style={{ marginLeft: '34px' }}>
              <a>查看联系方式</a>
            </div>
          </Tooltip>
        );
      }
      return <div />;
    }
    return <div />;
  };

  return (
    <div className={styles.marginPayList}>
      <Input
        className={styles.search}
        allowClear
        placeholder="输入名称筛选"
        onChange={filterOption}
      />
      <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
        <Row gutter={[16, 16]}>
          {list && list.length > 0 ? (
            list.map((item: any) => {
              const activeStyle = checkId == item.id ? styles.activeStyle : null;
              return (
                <Col xs={24} sm={12} md={8} key={item.id} onClick={() => handleCheck(item)}>
                  <div
                    className={styles.institutionsContent + ' ' + activeStyle}
                    style={item.isCurrentDistrict ? {} : { opacity: '0.6' }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      {checkId == item.id ? <span className={styles.mark} /> : null}
                      {item.url && (
                        <span className={styles.logo}>
                          <Avatar size={30} src={item.url} />
                        </span>
                      )}
                      <Tooltip title={item.name}>
                        <span className={styles.name}>{item.name}</span>
                      </Tooltip>
                    </div>
                    {checkAttribute(item)}
                    {/* <div className={styles.contact}>联系人：</div> */}
                  </div>
                </Col>
              );
            })
          ) : (
            <div style={{ color: '#a4a4a4', padding: '0 10px' }}>暂无数据</div>
          )}
        </Row>
      </div>

    </div>
  );
};

export default ItemList;
